<template>
	<view class="home-wrap">
		<SubNavigation title="越秀区下属镇街详情" :currentTab="tabKey" @tabChange="tabClick" />
		<view class="home-content">
			<cardbox style="width: 100%;" type='4' header="越秀区信息概览">
				<view slot="main" class="content-card-main0">
					<view class="main0-box">
						<view class="header">
							<view class="title">
								<image src="/static/name_icon.png" mode=""></image>
								<text>联络站数量</text>
							</view>
							<view class="header-right1">
								<image src="/static/zxllz.png" class="img" mode=""></image>
								<text>6 个</text>
							</view>
						</view>
						<view class="main0-dj">
							<view class="main0-dj-item">
								<image src="/static/ren-mian-bg1.png" class="bg" mode=""></image>
								<view class="name">
									片区联络站
								</view>
								<view class="num">
									14 <text class="unit">个</text>
								</view>
							</view>
							<view class="main0-dj-item">
								<image src="/static/ren-mian-bg2.png" class="bg" mode=""></image>
								<view class="name">
									其中：优秀联络站
								</view>
								<view class="num">
									4 <text class="unit">个</text>
								</view>
							</view>
						</view>
						<cTable :headerData="headerData0" :tableData="tableData0">
							<template v-slot:unitName="{data}">
								<view class="font unitName">
									{{data.unitName}}
								</view>
							</template>
							<template v-slot:controls="{data}">
								<view class="font controls" @click="lookView">
									{{data.controls}}
								</view>
							</template>
						</cTable>
						<view class="fgx-heng">

						</view>
						<view class="main0-box-bottom">
							<view class="header">
								<view class="title">
									<image src="/static/name_icon.png" class='img' mode=""></image>
									<text>洪桥街道各级人大代表团驻站人数</text>
								</view>
							</view>
							<view class="main0-box-bottom-con">
								<view class="item-box">
									<image src="/static/wjdb-img1.png" class='img' mode=""></image>
									<view class='text-box'>
										<view class="name">
											在穗全国代表
										</view>
										<view class="num">
											1<text>人</text>
										</view>
									</view>
								</view>
								<view class="item-box">
									<image src="/static/wjdb-img2.png" class='img' mode=""></image>
									<view class='text-box'>
										<view class="name">
											省代表
										</view>
										<view class="num">
											46<text>人</text>
										</view>
									</view>
								</view>
								<view class="item-box">
									<image src="/static/wjdb-img1.png" class='img' mode=""></image>
									<view class='text-box'>
										<view class="name">
											市代表
										</view>
										<view class="num">
											46<text>人</text>
										</view>
									</view>
								</view>
								<view class="item-box">
									<image src="/static/wjdb-img3.png" class='img' mode=""></image>
									<view class='text-box'>
										<view class="name">
											区代表
										</view>
										<view class="num">
											1<text>人</text>
										</view>
									</view>
								</view>
								<view class="item-box">
									<image src="/static/wjdb-img4.png" class='img' mode=""></image>
									<view class='text-box'>
										<view class="name">
											镇代表
										</view>
										<view class="num">
											11<text>人</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</cardbox>

			<cardbox style="width: 100%;" header="联络站列表">
				<view slot="main" class="content-card-main1">
					<cTable :headerData="headerData" :tableData="tableData">
						<template v-slot:unitName="{data}">
							<view class="font unitName">
								{{data.unitName}}
							</view>
						</template>
						<template v-slot:controls="{data}">
							<view class="font controls" @click="lookView">
								{{data.controls}}
							</view>
						</template>
					</cTable>
					<view class="zhankai">
						展开<uni-icons type="down" size="16" color="#2A8BFD"></uni-icons>
					</view>
				</view>
			</cardbox>
			<cardbox style="width: 100%;" header="联络站活动日历">
				<view slot="main" class="content-card-main2">
					<!-- <zbTooltip placement="top" color='#fff' ref="tooltip">
						<view slot="content">
							<view style="width: 536rpx;height: 292rpx;background: #FFFFFF;box-shadow: 0rpx 0rpx 32rpx 0rpx rgba(0,0,0,0.11);border: 2rpx solid #EDEDED;">
								{{dayInfo}}
								阿萨法手动阀
							</view>
						</view> -->
					<customCalendar :dateAdjustList='dateAdjustList'></customCalendar>
					<!-- </zbTooltip> -->
				</view>
			</cardbox>
		</view>
	</view>
</template>

<script>
	import SubNavigation from '@/components/SubNavigation.vue';
	import cardbox from '@/components/card/cardbox.vue'
	import cTable from '@/components/cTable/cTable.vue'
	import customCalendar from '@/components/customCalendar.vue'

	import zbTooltip from '@/uni_modules/zb-tooltip/components/zb-tooltip/zb-tooltip.vue'

	export default {
		components: {
			SubNavigation,
			cardbox,
			cTable,
			zbTooltip,
			customCalendar
		},
		data() {
			return {
				dateAdjustList:[{date:'2025/2/1',value:1},{date:'2025/2/3',value:2}],
				tabKey: 0,
				headerData: [{
						align: 'left',
						name: '联络站名称',
						value: 'unitName',
						solt: 'unitName'
					},
					{
						align: 'left',
						name: '操作',
						value: 'controls',
						solt: 'controls'
					},

				],
				tableData: [{
						unitName: '广州市越秀区洪桥街道中心联络站',
						controls: '查看详情'
					},
					{
						unitName: '广州市越秀区洪桥街道中心联络站',
						controls: '查看详情'
					},
					{
						unitName: '广州市越秀区洪桥街道中心联络站',
						controls: '查看详情'
					},
					{
						unitName: '广州市越秀区洪桥街道中心联络站',
						controls: '查看详情'
					},
				],
				headerData0: [{
						width: 30,
						align: 'left',
						name: '优秀联络站',
						value: 'unitName',
						solt: 'unitName'
					},
					{
						width: 20,
						align: 'left',
						name: '操作',
						value: 'controls',
						solt: 'controls'
					},
				],
				tableData0: [{
						unitName: '广州市越秀区洪桥街道中心联络站',
						controls: '查看详情'
					},
					{
						unitName: '广州市越秀区洪桥街道中心联络站',
						controls: '查看详情'
					},
					{
						unitName: '广州市越秀区洪桥街道中心联络站',
						controls: '查看详情'
					},
					{
						unitName: '广州市越秀区洪桥街道中心联络站',
						controls: '查看详情'
					},
				],
				dayInfo: ''

			};
		},
		methods: {
			tabClick(val) {
				this.tabKey = val;
				// 可选择跳转页面或更新内容
			},
			change(val) {
				console.log(val);
				this.dayInfo = val.fulldate
			}
		}
	};
</script>

<style scoped lang="scss">
	.home-wrap {
		padding-bottom: 20rpx;

		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				line-height: 33rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				display: flex;
				align-items: center;

				image {
					width: 90rpx;
					height: 84rpx;
					margin-left: -9rpx;
				}

				text {
					margin-top: 4rpx;
				}
			}


			.header-right {
				position: relative;
				width: 234rpx;
				height: 52rpx;

				.img {
					width: 234rpx;
					height: 52rpx;
				}

				text {
					font-family: DIN, DIN;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					position: absolute;
					top: 50%;
					right: 20rpx;
					transform: translateY(-50%);
				}
			}

			.header-right1 {
				position: relative;
				width: 236rpx;
				height: 52rpx;

				.img {
					width: 234rpx;
					height: 52rpx;
				}

				text {
					font-family: DIN, DIN;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					position: absolute;
					top: 50%;
					right: 20rpx;
					transform: translateY(-50%);
				}

			}

		}

		.main0-box {

			padding: 20rpx;

			.main0-dj {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 36rpx;

				.main0-dj-item {
					width: 49%;
					height: 148rpx;
					position: relative;

					.bg {
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
					}

					.name {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #7F7F7F;
						position: absolute;
						left: 32rpx;
						top: 26rpx;
					}

					.num {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 40rpx;
						color: #000000;
						position: absolute;
						left: 32rpx;
						top: 72rpx;

						.unit {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #7F7F7F;
							padding-left: 10rpx;
						}
					}
				}

			}

			.unitName {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #000000;
				width: 330rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.controls {
				font-family: DIN-BoldItalic, DIN-BoldItalic;
				font-weight: 400;
				font-size: 24rpx;
				color: #2A8BFD;
				width: 150rpx;
			}

			.fgx-heng {
				width: 100%;
				height: 12rpx;
				border-radius: 50%;
				background-color: #F5F7F9;
				margin: 34rpx 0;

			}

			.main0-box-bottom {

				.main0-box-bottom-con {
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					/* 每行 3 个元素 */
					grid-gap: 20rpx;

					/* 元素之间的间距 */
					.item-box {
						height: 148rpx;
						position: relative;

						.img {
							position: absolute;
							left: 0;
							top: 0;
							width: 100%;
							height: 100%;
						}

						.text-box {
							padding: 26rpx 28rpx;
							position: absolute;
							left: 0;
							top: 0;
							width: 100%;
							height: 100%;

							.name {
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 24rpx;
								color: #7F7F7F;
							}

							.num {
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 40rpx;
								color: #000000;
								padding-top: 12rpx;

								text {
									font-family: PingFang SC, PingFang SC;
									font-weight: 500;
									font-size: 24rpx;
									color: #7F7F7F;
								}
							}
						}
					}
				}
			}

		}

		.content-card-main1 {
			padding: 0 20rpx 20rpx;

			.controls {
				font-family: DIN-BoldItalic, DIN-BoldItalic;
				font-weight: 400;
				font-size: 24rpx;
				color: #2A8BFD;
			}
		}

		.content-card-main2 {}
	}

	.zhankai {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #2A8BFD;
		text-align: center;
		padding: 26rpx 0;
	}
</style>